var dataStatusController = DataStatusController();
var stateTableId = '#stateTable';
var stateUlId = '#informationUL';
var pageNumber = null;


function StateService() {
    var service = {};
    //默认数据加载
    service.load = function(monitorPointId,selectChangeFlag){
        var p = service.getParameter();
        dataStatusController.getDataStatus(monitorPointId,p.startTime,p.endTime,1,p.pageSize,function (resp) {
            var data = resp.data;
            // receivedCount: 0
            // total: 1
            //上方表格数据加载
            if(selectChangeFlag){
                $(stateTableId).empty("");
                var $trTemp = $("<tr></tr>");
                //往行里面追加 td单元格
                $trTemp.append("<th>"+ '应接收' +"</th>");
                $trTemp.append("<th>"+ '已经收' +"</th>");
                $trTemp.append("<th>"+'数据完成度'+"</th>");
                $trTemp.appendTo(stateTableId);
            }
            service.loadDataTable(resp.data);
            {
                //下方缺失数据ul加载
               service.loadUlData(data);
                var total = resp.extra;
                if(total === 0 ){
                    total = 1;
                }
                $("#pageTool").jqPaginator({
                    totalPages: Math.ceil(total / p.pageSize),
                    visiblePages: 1,
                    currentPage: 1,
                    prev: '<li><a href="javascript:void(0);" style="background-color: #060f1f"><img src="../../common/images/left.png" style="position: relative;top: 6px;"><\/a><\/li>',
                    next: '<li><a href="javascript:void(0);" style="background-color: #060f1f"><img src="../../common/images/right.png" style="position: relative;top: 6px;"><\/a><\/li>',
                    page: '<li><a href="javascript:void(0);" style="margin-left:5px;margin-right:5px;background-color: #060f1f;position: relative;"> {{page}} / {{totalPages}} <\/a><\/li>',
                    onPageChange: function (pageNo,type) {
                        pageNumber = pageNo;
                        //保留第一行
                        $(stateUlId).empty("");
                        dataStatusController.getDataStatus(monitorPointId,p.startTime,p.endTime,pageNo,p.pageSize,function (resp) {
                                service.loadUlData(resp.data);
                            });
                    }
                });

            }
        })
    };

    service.loadUlData = function(data){
        //下方缺失数据ul加载
        data.absentDataTimes.map(function (item) {
            var $li = $("<li></li>")
            $li.append("<li>"+item+"</li>");
            $li.appendTo("#informationUL");
        });
    };

    service.loadDataTable = function(data){
        var $trTemp = $("<tr></tr>");
        //往行里面追加 td单元格
        $trTemp.append("<td>"+ data.total +"</td>");
        $trTemp.append("<td>"+ data.receivedCount +"</td>");
        $trTemp.append("<td style='height: 150px;width: 400px' id='chart'>"+"</td>");
        $trTemp.appendTo(stateTableId);

        //echarts图表加载
        var dom = document.getElementById("chart");
        var myChart = echarts.init(dom);
        var app = {};
        var option = {
            title : {
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                bottom:'0',
                data: ['已接收','未接收'],
                textStyle:{
                    color:'#c6e1ff'
                }
            },
            series : [
                {
                    name: '数据完成度',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:data.receivedCount, name:'已接收', itemStyle: { color: '#22b9e9' }},
                        {value:data.total - data.receivedCount, name:'未接收', itemStyle: { color: '#072c53' }},
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option, true);
    }


    //获取今天的0点是23:59时间
    service.getTodayTime = function () {
        var start = new Date(new Date(new Date().toLocaleDateString()).getTime());
        // var start = '2019-02-01 00:00:00';
        var end = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1);
        var pageSize = $("#pageSize").val();
        return {
            start:start,
            end:end,
            pageSize:pageSize
        };
    };
    //获取load加载所需要的所有参数
    service.getParameter = function () {
        var startTime = common.dateFormatter_inverse($("#startTime").val());
        var endTime = common.dateFormatter_inverse($("#endTime").val());
        console.log(startTime,endTime);
        var pageSize = $("#pageSize").val();
        return {
            startTime:startTime,
            endTime:endTime,
            pageSize:pageSize
        }
    };
    return service;
}

var stateService = StateService();

function init() {
    $("#hideBtn").on('click', function () {
        var flag = $("#hideBtn").data('flag');
        //隐藏
        if(flag == '1'){
            $("#hideBtn").data('flag','0');
            $("#information").hide();
            $(".state-footer").hide();
            $(".imgTitle span").html('显示缺失数据');
            $("#hideBtn").attr('src', '../../common/images/downArrow.png')
        }else{
            //显示
            $("#hideBtn").data('flag','1');
            $("#information").show();
            $(".state-footer").show();
            $(".imgTitle span").html('收起缺失数据');
            $("#hideBtn").attr('src', '../../common/images/upArrow.png')
        }
    });
    laydate.render({
        elem: '#startTime', //指定元素
        theme: '#060f1f',
        type: 'datetime',
        value:stateService.getTodayTime().start
    });
    laydate.render({
        elem: '#endTime', //指定元素
        theme: '#060f1f',
        type: 'datetime',
        value:stateService.getTodayTime().end
    });
    stateService.load(parent.monitorPointId);

    //分页显示数量的重置
    $("#pageSize").on('change', function () {
        $('#pageTool').jqPaginator('destroy')
        stateService.load(parent.monitorPointId,true);
    });

    //时间搜索
    $("#search").on('click', function () {
        stateService.load(parent.monitorPointId,true);
    });
}

$(function () {
    init();
});
